/**
 *@描述：知识创建和编辑主页面，其中包括创建知识的所有页面的调度
 *@作者：殷健
 *@创建时间：2022/7/7
 *@最后修改时间：2022/7/7
 */
import {useEffect, useState} from 'react';
import KnowledgeTitle from './components/Content/title';
import Section from './components/section';
import KnowledgeBasic from './components/Content/basic';
import KnowledgeIntellectualProperty from './components/Content/intellectualProperty';
import KnowledgeStructure from './components/Content/structure';
import KnowledgeCode from './components/Content/code';
import KnowledgeDiagram from './components/Content/diagram';
import KnowledgeAttachment from './components/Content/attachment';
import KnowledgeRelevance from './components/Content/relevance';
import KnowledgeQuote from './components/Content/quote';

import styles from './create.less';
import {useParams} from "umi";
import {KeepAlive} from 'react-activation';
import {uniqueId} from "lodash";

const KnowledgeCreate = () => {
    const {
        type,
        kid,
    }: {
        type: string;
        kid: string;//路由上的知识ID
    } = useParams();
    const [curSection, setCurSection] = useState<AircasKB.Knowledge.SectionItem>({id: 'basic', title: "基本信息"});
    const [title, setTitle] = useState("标题");
    const [knowledgeId, setKnowledgeId] = useState<string>("");
    const [structure, setStructure] = useState<AircasKB.Knowledge.SectionItem[]>([]);

    //组件初始化函数
    //todo: useEffect
    useEffect(() => {
        setKnowledgeId(kid);
    }, [])

    return (
        <div className={styles.wrapper}>
            <div className={styles.left}>
                <Section value={curSection} onChange={setCurSection} knowledgeType={type} knowledgeId={knowledgeId}
                         setStructure={setStructure} structure={structure}/>
            </div>
            <div className={styles.right}>
                <div className={styles.title}>
                    <KnowledgeTitle
                        size="large"
                        value={title}
                        onChange={setTitle}
                        knowledgeId={knowledgeId}
                        display={curSection.id == 'basic'}
                    />
                </div>

                {curSection.id === 'basic' &&
                    <KeepAlive id='basic'>
                        <KnowledgeBasic title={title} knowledgeId={knowledgeId} setKnowledgeId={setKnowledgeId}
                                               setCurSection={setCurSection} curSection={curSection}
                                               structure={structure} setStructure={setStructure}/>
                    </KeepAlive>
                }
                {curSection.id === 'intellectualProperty' &&
                    <KeepAlive  id='intellectualProperty'>
                        <KnowledgeIntellectualProperty title={title} setKnowledgeId={setKnowledgeId}
                                                              knowledgeId={knowledgeId} setCurSection={setCurSection}
                                                              curSection={curSection}/>
                    </KeepAlive>
                }
                {
                    curSection.type === '25' &&
                    <KeepAlive id={curSection.chapterNo}>
                        <KnowledgeStructure title={title} setKnowledgeId={setKnowledgeId}
                                            knowledgeId={knowledgeId} setCurSection={setCurSection}
                                            curSection={curSection} structure={structure} setStructure={setStructure}/>
                    </KeepAlive>
                }
                {curSection.type === '26' &&
                    <KeepAlive id={curSection.chapterNo}><KnowledgeCode key={curSection.id} title={title} setKnowledgeId={setKnowledgeId}
                                              knowledgeId={knowledgeId} setCurSection={setCurSection}
                                              curSection={curSection} structure={structure}
                                              setStructure={setStructure}/></KeepAlive>}
                {curSection.type === '27' &&
                    <KeepAlive><KnowledgeDiagram key={curSection.id} title={title} setKnowledgeId={setKnowledgeId}
                                                 knowledgeId={knowledgeId} setCurSection={setCurSection}
                                                 curSection={curSection} structure={structure}
                                                 setStructure={setStructure}/></KeepAlive>}
                {curSection.id === 'attachment' &&
                    <KeepAlive id="attachment"><KnowledgeAttachment title={title} knowledgeId={knowledgeId}
                                                    setCurSection={setCurSection} curSection={curSection}/></KeepAlive>}
                {curSection.id === 'relevance' &&
                    <KeepAlive  id="relevance"><KnowledgeRelevance title={title} knowledgeId={knowledgeId} setCurSection={setCurSection}
                                                   curSection={curSection}/></KeepAlive>}
                {curSection.id === 'quote' &&
                    <KeepAlive  id="quote"><KnowledgeQuote title={title} knowledgeId={knowledgeId} setCurSection={setCurSection}
                                               curSection={curSection}/></KeepAlive>}
            </div>
        </div>
    );
};
export default KnowledgeCreate;
